<template>
  <div class='interfaceDescWrapper'>
    <top></top>
    <div class="interfaceDescContent">
        <div class="interfaceDescMiddle">
            <div class="oneLeftWrapper">
                <div class="Oneleft">
                    <div class="indescLeft" >
                        <div class="indescImage" :style="{backgroundImage:`url(${imageUrl})`}">
                        </div>
                    </div>
                    <div class="descContentLeft">
                        <div class="indescTitle">
                            天气预报
                        </div>
                        <div class="desc">
                            <p>
                            数据来源于国家气象局发布的数据,可根据地区名称、经纬度、IP查询对应地区的天气预报。 包括天气预警、白天晚上的温度、湿度、风速、风力，一氧化碳、二氧化氮等PM 2.5空气质量指数，穿衣、出行、洗车等生活指数。7天天气范围的预报每天更新3次，分别是7:3
                            </p>
                        </div>
                        <div class="dataNum">
                            <div class="dataCount">
                                <p>
                                    浏览量：<span class="browseSpan">857537</span>
                                    <span style="margin-left: 50px">使用人数： <span class="userSpan">169040</span></span>
                                </p>
                                <p>
                                    调用量：<span class="useSpan">4884596436</span>
                                </p>
                            </div>
                            <div class="dataPrice">
                                ¥ <span> 0.01 </span>元起
                            </div>
                        </div>
                        <div class="buttonWrapper">
                            <button class="btnOne" @click="handleGoMeal()">订购套餐</button>
                            <button class="btnTwo" @click="handleViewTest()">查看演示</button>
                        </div>
                    </div>
                </div>
                <!-- API接入点 -->
                <div class="APIPointWrapper">
                     <div class="APIPointTitle">
                         接入点/API Point
                     </div>
                     <div class="APIPointContent">
                         <div class="APIPointContentItem" v-for="item in APIPointList" :key="item.name" :class="{active: item.name === selectApiPoint}" @click="handleSelect(item.name)">
                            <div class="itemCase">
                                {{item.title}}
                            </div>
                         </div>
                         <div class="clearBoth" style="clear: both">
                         </div>
                     </div>
                     <!-- 接入点说明 -->
                     <div class="PointIntroduce">
                         <div class="PointIntroduceLeft"><p>接入点说明:</p></div>
                         <div class="PointIntroduceRight">
                             <p>通过IP地址获取IP对应的区域信息，再根据区域信息获取对应的天气情况</p>
                         </div>
                     </div>
                     <!-- 相关文档 -->
                     <div class="PointIntroduce">
                         <div class="PointIntroduceLeft"><p>相关文档:</p></div>
                         <div class="PointIntroduceRight">
                             <p>通过IP地址获取IP对应的区域信息，再根据区域信息获取对应的天气情况</p>
                         </div>
                     </div>
                     <!-- 接口地址 -->
                     <div class="PointIntroduce">
                         <div class="PointIntroduceLeft"><p>接口地址:</p></div>
                         <div class="PointIntroduceRight">
                             <p>http://route.showapi.com/9-4 （注意：接口支持https，更安全，但稍慢一些，你懂的。请根据自己的情况进行选择。）</p>
                         </div>
                     </div>
                     <!-- 返回格式 -->
                     <div class="PointIntroduce">
                         <div class="PointIntroduceLeft"><p>返回格式:</p></div>
                         <div class="PointIntroduceRight">
                             <p>json</p>
                         </div>
                     </div>
                     <!-- 请求方式 -->
                     <div class="PointIntroduce">
                         <div class="PointIntroduceLeft"><p>请求方式:</p></div>
                         <div class="PointIntroduceRight">
                             <p>HTTP协议，支持GET/POST方法。</p>
                         </div>
                     </div>
                     <!-- 调用样式及调试工具 -->
                     <div class="PointIntroduce">
                         <div class="PointIntroduceLeft"><p>调用样式及调试工具:</p></div>
                         <div class="PointIntroduceRight">
                             <p> 测试工具</p>
                         </div>
                     </div>
                </div>
                <!-- 请求参数 -->
                <div class="parameterWrapper">
                    <div class="parameterTitle">
                        请求参数/Request parameter
                    </div>
                    <div class="parameterList">
                        1、参数列表
                    </div>
                    <div class="parameterTable">
                        <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                            <el-table-column
                            prop="name"
                            label="参数名称"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="type"
                            label="类型"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="case"
                            label="示例值">
                            </el-table-column>
                            <el-table-column
                            prop="must"
                            label="必须">
                            </el-table-column>
                            <el-table-column
                            prop="desc"
                            label="描述">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <!-- 返回参数 -->
                <div class="returnWrapper">
                    <div class="parameterTitle">
                        返回参数/Return parameter
                    </div>
                    <div class="parameterList">
                        1、参数列表
                    </div>
                    <div class="parameterTable">
                        <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                            <el-table-column
                            prop="name"
                            label="参数名称"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="type"
                            label="类型"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="case"
                            label="示例值">
                            </el-table-column>
                            <el-table-column
                            prop="must"
                            label="必须">
                            </el-table-column>
                            <el-table-column
                            prop="desc"
                            label="描述">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <!-- 请求示例 -->
                <div class="RequestWrapper">
                    <div class="parameterTitle">
                        请求示例/Request example
                    </div>
                    <div class="requestCase">
                    </div>
                </div>
                <!-- 返回示例 -->
                <div class="returnCaseWrapper">
                    <div class="parameterTitle">
                        返回示例/Return example
                    </div>
                    <div class="returnExample">

                    </div>
                </div>
            </div>
            <div class="indescRight">
                <div class="recommendWrapper">
                   <div class="recommendTitle">
                        推荐接口/API
                   </div>
                   <div class="recommendContent">
                       <div :style="{backgroundImage:`url(${conmmendImage})`}" class="recommendImageUrl"></div>
                       <div class="recommendDesc">
                           <p class="recommendDescTitle">全国快递查询</p>
                           <p class="recommendDescCase">全国快递信息查询接口由中国联通API商城</p>
                       </div>
                   </div>
                   <div class="recommendContent">
                       <div :style="{backgroundImage:`url(${conmmendImage})`}" class="recommendImageUrl"></div>
                       <div class="recommendDesc">
                           <p class="recommendDescTitle">全国快递查询</p>
                           <p class="recommendDescCase">全国快递信息查询接口由中国联通API商城</p>
                       </div>
                   </div>
                   <div class="recommendContent">
                       <div :style="{backgroundImage:`url(${conmmendImage})`}" class="recommendImageUrl"></div>
                       <div class="recommendDesc">
                           <p class="recommendDescTitle">全国快递查询</p>
                           <p class="recommendDescCase">全国快递信息查询接口由中国联通API商城</p>
                       </div>
                   </div>
                   <div class="recommendContent">
                       <div :style="{backgroundImage:`url(${conmmendImage})`}" class="recommendImageUrl"></div>
                       <div class="recommendDesc">
                           <p class="recommendDescTitle">全国快递查询</p>
                           <p class="recommendDescCase">全国快递信息查询接口由中国联通API商城</p>
                       </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import star01Image from '@/assets/img/home/star01.png'
import star02Image from '@/assets/img/home/star02.png'
import star03Image from '@/assets/img/home/star03.png'
import star04Image from '@/assets/img/home/star04.png'
import star05Image from '@/assets/img/home/star05.png'
import Top from '@/components/top/top.vue'
import Footer from '@/components/footer/footer.vue'
export default {
  name: 'InterfaceAll',
  data () {
    return {
      tableData: [
        {
          name: '2016-05-02',
          type: '王小虎',
          case: '上海市普陀区金沙江路 1518 弄',
          must: '是',
          desc: '2121'
        },
        {
          name: '2016-05-04',
          type: '王小虎',
          case: '上海市普陀区金沙江路 1517 弄',
          must: '是',
          desc: '2121'
        },
        {
          name: '2016-05-01',
          type: '王小虎',
          case: '上海市普陀区金沙江路 1519 弄',
          must: '是',
          desc: '2121'
        },
        {
          name: '2016-05-03',
          type: '王小虎',
          case: '上海市普陀区金沙江路 1516 弄',
          must: '是',
          desc: '2121'
        }
      ],
      selectApiPoint: '1',
      conmmendImage: star01Image,
      imageUrl: star02Image,
      star01Image,
      star03Image,
      star04Image,
      star05Image,
      APIPointList: [
        {
          name: '1',
          title: '坐标-->查询天气'
        },
        {
          name: '2',
          title: 'IP-->查询天气'
        },
        {
          name: '3',
          title: '地名-->查询天气'
        },
        {
          name: '4',
          title: 'ID或名称-->查询24小时天气预报'
        },
        {
          name: '5',
          title: 'ID或名称-->查询查未来15天预报'
        },
        {
          name: '6',
          title: 'ID或名称-->查询24小时天气预报'
        },
        {
          name: '7',
          title: 'ID或名称-->查询查未来15天预报'
        }
      ]
    }
  },
  mounted () {
  },
  components: {
    Top,
    Footer
  },
  created () {
  },
  methods: {
    handleSelect (name) {
      this.selectApiPoint = name
    },
    handleViewTest () {
      this.$router.push('/interfacetest')
    },
    handleGoMeal () {
      this.$router.push('/interfacebuy')
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/variable.styl';
.interfaceDescWrapper {
    background-color white
    .interfaceDescContent {
        margin-top 20px
        .interfaceDescMiddle {
            display flex
            justify-content space-between
            width 1200px
            margin 0 auto
            padding 20px 20px
            .oneLeftWrapper {
                width 80%
                .Oneleft {
                    display flex
                    .indescLeft {
                        height 133px
                        border 1px solid #ececec
                        padding 30px 20px
                        .indescImage {
                            width 128px
                            height 128px
                            background-repeat no-repeat
                            background-size cover
                        }
                    }
                    .descContentLeft {
                        margin-left 20px
                        .indescTitle {
                            font-size 20px
                            font-weight bold
                        }
                        .desc {
                            margin-top 20px
                            font-size 12px
                            color #999
                            p {
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                overflow: hidden;
                            }
                        }
                        .dataNum {
                            display flex
                            margin-top 15px
                        .dataCount {
                            padding-right 30px
                            border-right-style solid
                            border-width:1px
                            border-color: #E4E4E4
                            font-size 12px
                            .browseSpan {
                                color $color-theme
                            }
                            .userSpan {
                                color #17cec8
                            }
                            .useSpan {
                                color #65acda
                            }
                        }
                        .dataPrice {
                            padding-left 30px
                            color $color-theme
                            span {
                                font-size 24px
                            }
                        }
                        }
                        .buttonWrapper {
                            margin-top 41px
                            .btnOne {
                                cursor pointer
                                color: white
                                padding 5px 20px
                                border: solid 1px #E0E0E0;
                                border-radius 3px
                                background-color: $color-theme
                                &:focus {
                                outline: none
                                }
                            }
                            .btnTwo {
                                cursor pointer
                                color: white;
                                padding 5px 20px
                                border: solid 1px #E0E0E0;
                                border-radius 3px
                                background-color: #65ACDA;
                                &:focus {
                                outline: none
                                }
                            }
                        }
                    }
                }
                .APIPointWrapper {
                    margin-top 30px
                    .APIPointTitle {
                        padding 10px 0px
                        border-top-style solid
                        border-width:1px
                        border-color: #E4E4E4
                        font-size 22px
                        font-weight bold
                    }
                    .APIPointContent {
                        .APIPointContentItem {
                            font-size 14px
                            cursor pointer
                            margin-bottom 10px
                            margin-right 10px
                            float left
                            color #666
                            width 148px
                            padding 0px 15px
                            background-color #F5F5F5
                            .itemCase {
                                height 30px
                                text-align center
                                padding 15px 10px
                            }
                        }
                        .active {
                            background-color $color-theme
                            color white
                        }
                    }
                    .PointIntroduce {
                        margin-top 20px
                        display flex
                        .PointIntroduceLeft {
                        }
                        .PointIntroduceRight {
                            margin-left 15px
                            color #999
                            font-size 14px
                        }
                    }
                }
                .parameterWrapper {
                    margin-top 20px
                    .parameterTitle {
                        padding 10px 0px
                        border-top-style solid
                        border-width:1px
                        border-color: #E4E4E4
                        font-size 22px
                        font-weight bold
                    }
                    .parameterList {
                        color #999
                    }
                    .parameterTable {
                        margin-top 10px
                    }
                }
                .returnWrapper {
                    margin-top 20px
                    .parameterTitle {
                        padding 10px 0px
                        border-top-style solid
                        border-width:1px
                        border-color: #E4E4E4
                        font-size 22px
                        font-weight bold
                    }
                    .parameterList {
                        color #999
                    }
                    .parameterTable {
                        margin-top 10px
                    }
                }
                .RequestWrapper {
                    margin-top 20px
                    .parameterTitle {
                        padding 10px 0px
                        border-top-style solid
                        border-width:1px
                        border-color: #E4E4E4
                        font-size 22px
                        font-weight bold
                    }
                    .requestCase {
                        width 100%
                        height 200px
                        background-color #F5F2F0
                    }
                }
                .returnCaseWrapper {
                     margin-top 20px
                    .parameterTitle {
                        padding 10px 0px
                        border-top-style solid
                        border-width:1px
                        border-color: #E4E4E4
                        font-size 22px
                        font-weight bold
                    }
                    .returnExample {
                        width 100%
                        height 200px
                        background-color #F5F2F0
                    }
                }
            }
            .indescRight {
                margin-left 20px
                width 20%
                .recommendWrapper {
                    margin-top -20px
                    .recommendTitle {
                        font-size: 24px
                    }
                    .recommendContent {
                        margin-top 20px
                        display flex
                        .recommendImageUrl {
                            width 50%
                            border 1px solid #E0E0E0
                            width 42px
                            height 42px
                            padding 5px 5px
                            background-repeat no-repeat
                            background-size cover
                        }
                        .recommendDesc {
                            margin-left 10px
                            width 50%
                            .recommendDescTitle {
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 1;
                                overflow: hidden;
                            }
                            .recommendDescCase {
                                margin-top 8px
                                font-size: 14px
                                color #999
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 1;
                                overflow: hidden;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
